<template>
  <div class="detail-page">
    <common-header></common-header>
    <div class="detail">
      <Row style="margin-top:40px;margin-bottom:20px;">
        <goods-title title="评论"></goods-title>
        <goods-comment
          v-for="comment in comments"
          :key="comment.bid"
          :comment="comment"
        >
        </goods-comment>
      </Row>
      <Row class="hh">
        <textarea id="con" rows="5" cols="98" placeholder="请输入你的评论内容" />
        <div>
          <button class="submitBgc" @click="onAdd">提交</button>
        </div>
      </Row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: {},
      id: 0,
      comments: []
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    if (this.id) {
      this.$api.goods.getDetail(this.id).then(data => {
        this.goods = data;
      });
      this.$api.comment.get(this.id).then(data => {
        this.comments = data;
      });
    }
  },
  methods: {
    onAdd() {
      let content = document.getElementById("con").value;
      //console.log(new Date());
      let obj = {
        bid: Math.random(),
        content: content,
        createdAt: new Date()
      }
      document.getElementById("con").value = "";
      this.comments.push(obj);
      //window.localStorage.setItem("obj",this.comments);
    }
  }
};
</script>

<style lang="scss" scoped>
.detail {
  margin: 30px 15%;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px #fff;
}
.submitBgc{
  width: 100px;
  height: 30px;
  outline: 0;
  border: 0 ;
  border-radius: 3px;
  cursor: pointer;
  color:#fff;
  background: linear-gradient(to right, #933, #a44);
}
</style>
